import React, {useReducer} from 'react'

const initData  = {
  name:'小明',
  age:22,
  sex:'男'
}

// reducer: 返回和修改state
const reducer = (state,action) => {
  // state: 当前组件内的数据
  // action: 本次修改的描述信息，type 属性用来判断本次如何修改
  console.log('点击了',state,action)
  if(action.type === 'ADD-AGE') {
    return {...state,age:state.age + 1}
  }
  return state
  
}


const App = () => {

  // 调用 dispatch 会触发 reducer 函数执行，并把 action 传给 reducer
  // dispatch(action)
  // action: { type: '描述本次修改内容' }

  const [state , dispatch] = useReducer(reducer,initData)
  console.log(state)

  return (
    <div>
      <button onClick={() => {
        dispatch({
          type:'ADD-AGE'
        })
      }}>age++</button>

      <p>姓名:{state.name}</p>
      <p>年龄:{state.age}</p>
      <p>性别:{state.sex}</p>

    </div>
  )
}

export default App
